<!DOCTYPE html>
<html>

<head>
  <title>Peaks.js Demo Page</title>
  <style>
    #titles {
      font-family: 'Helvetica neue', Helvetica, Arial, sans-serif;
    }
    
    #titles,
    [id*="waveform-visualiser"] {
      margin: 24px auto;
      width: 1000px;
    }
    
    [id*="waveform-visualiser"] [class*="-container"] {
      box-shadow: 3px 3px 20px #919191;
      margin: 0 0 4px 0;
      -moz-box-shadow: 3px 3px 20px #919191;
      -webkit-box-shadow: 3px 3px 20px #919191;
      line-height: 0;
    }
    
    .overview-container {
      height: 55px;
    }
    /* #first-waveform-visualiser-container {
        border: 1px solid #19a3f4;
        padding: 20px;
        width: 1040px;
      }*/
    
    #second-waveform-visualiser-container [class*="-container"] {
      background: #111;
    }
    
    #demo-controls, #segments,#points {
      margin: 0 auto 24px auto;
      width: 1000px;
    }
    
    #demo-controls>* {
      vertical-align: middle;
    }
    
    #demo-controls button {
      background: #cccccc;
      border: 1px solid #4285F4;
      cursor: pointer;
      padding: 8px 10px;
      border-radius: 4px;
    }

    table{ 
    table-layout:fixed; 
    empty-cells:show; 
    border-collapse: collapse; 
    margin:0 auto; 
    } 
    td{ 
    height:30px; 
    } 
    h1,h2,h3{ 
    font-size:12px; 
    margin:0; 
    padding:0; 
    } 
    .table{ 
    border:1px solid #cad9ea; 
    color:#666; 
    } 
    .table th { 
    background-repeat:repeat-x; 
    height:30px; 
    } 
    .table td,.table th{ 
    border:1px solid #cad9ea; 
    padding:0 1em 0; 
    } 
    .table tr.alter{ 
    background-color:#f5fafe; 
    } 
  </style>
</head>

<body>
  <div id="titles">
    <h1>Peaks.js Demo</h1>

    <p>Peaks.js is a modular client-side JavaScript component designed for the display of and interaction with audio waveform
      material in the browser.
    </p>

    <p>Peaks.js was developed by <a href="http://www.bbc.co.uk/rd">BBC R&amp;D</a> to allow users to make accurate clippings
      of audio data over a timeline in the browser.</p>

    <p>Peaks.js uses HTML5 canvas technology to display the audio waveform at different zoom levels and provides some basic
      convenience methods for interacting with waveforms and creating time-based visual sections for denoting content to
      be clipped or for reference eg: distinguishing music from speech or identifying different music tracks.</p>
  </div>

  <div id="first-waveform-visualiser-container"></div>

  <div id="demo-controls">
    <audio controls=controls>
      <source src="./test_data/20160523053858-20160523134714-A.mp3" type="audio/mpeg">
      <!--<source src="./test_data/TOL_6min_720p_download.ogg" type="audio/ogg">-->
      Your browser does not support the audio element.
    </audio>

    <button data-action="zoom-in">Zoom in</button>
    <button data-action="zoom-out">Zoom out</button>
    <button data-action="add-segment">Add a Segment at current time</button>
    <button data-action="add-point">Add a Point at current time</button>
    <button data-action="log-data">Log segments/points</button>
  </div>

  <div id="segments">
    <table class="table">
      <thead>
        <tr>
          <th>Segment Name</th>
          <th>StartTime</th>
          <th>EndTime</th>
          <th>Operation</th>
        </tr>
      </thead>
      <tbody id="segment-list">
        
      </tbody>
    </table>

  </div>

  <div id="points">
    <table class="table">
      <thead>
        <tr>
          <th>Point Name</th>
          <th>Timestamp</th>
          <th>Operation</th>
        </tr>
      </thead>
      <tbody id="point-list">
        
      </tbody>
    </table>

  </div>

  <script src="./peaks.js"></script>
  <script>
    (function (Peaks) {
      debugger;
      var options = {
        container: document.getElementById('first-waveform-visualiser-container'),
        mediaElement: document.querySelector('audio'),
        ldataUri: {
          json: './test_data/20160523053858-20160523134714-l.json'
        },
        rdataUri: {
          json: './test_data/20160523053858-20160523134714-r.json'
        },
        dataUri: {
          //arraybuffer: './test_data/TOL_6min_720p_download.dat',
          json: './test_data/20160523053858-20160523134714-A.json'
        },
        template: [
          '<div class="waveform">',
          '<div class="zoom-container"></div>',
          '<div class="zoom-container-left"></div>',
          '<div class="zoom-container-right"></div>',
          '<div class="overview-container"></div>',
          '</div>'
        ].join(''),
        keyboard: false,
        height: 60
      };

      var peaksInstance = Peaks.init(options);

      document.querySelector('[data-action="zoom-in"]').addEventListener("click", peaksInstance.zoom.zoomIn.bind(
        peaksInstance));
      document.querySelector('[data-action="zoom-out"]').addEventListener("click", peaksInstance.zoom.zoomOut.bind(
        peaksInstance));

      document.querySelector('button[data-action="add-segment"]').addEventListener("click", function () {
        var size = peaksInstance.segments.getSegments() ? peaksInstance.segments.getSegments().length : 0;
        var segmentLabel = prompt('input segment label name:', 'segment' + (size + 1));
        peaksInstance.segments.add({
          startTime: peaksInstance.time.getCurrentTime(),
          endTime: peaksInstance.time.getCurrentTime() + 10,
          editable: true,
          labelText: segmentLabel
        });

        console.log(peaksInstance.segments.getSegments());
        var segments = peaksInstance.segments.getSegments();
        var segmentsList = '';
        for (var i in segments) {
          var labelText = segments[i].labelText;
          var startTime = segments[i].startTime;
          var endTime = segments[i].startTime;
          segmentsList += '<tr class="alter">'+
                        '<td>'+labelText+'</td>'+
                        '<td>'+startTime+'</td>'+
                        '<td>'+endTime+'</td>'+
                        '<td><button data-action="delete-segment" data-segmentid="'+segments[i].id+'">Delete</button></td>'+
                        '</tr>';
        }
        document.getElementById('segment-list').innerHTML = segmentsList;
        document.querySelector('button[data-action="delete-segment"]').addEventListener('click',function(event){
          var segmentid = this.dataset.segmentid;
          peaksInstance.segments.removeById(segmentid);
          var tr = this.parentNode.parentNode;
          var tbody = tr.parentNode;
          tbody.removeChild(tr);
          
        });
      });

      document.querySelector('button[data-action="add-point"]').addEventListener("click", function () {
         var size = peaksInstance.points.getPoints() ? peaksInstance.points.getPoints().length : 0;
        var pointLabel = prompt('input point label name:', 'point' + (size + 1));
        peaksInstance.points.add({
          timestamp: peaksInstance.time.getCurrentTime(),
          editable: true,
          labelText:pointLabel
        });

        console.log(peaksInstance.points.getPoints());
        var points = peaksInstance.points.getPoints();
        var pointsList = '';
        for (var i in points) {
          var labelText = points[i].labelText;
          var timestamp = points[i].timestamp;
          pointsList += '<tr class="alter">'+
                        '<td>'+labelText+'</td>'+
                        '<td>'+timestamp+'</td>'+
                        '<td><button data-action="delete-point" data-pointid="'+points[i].id+'">Delete</button></td>'+
                        '</tr>';
        }
        document.getElementById('point-list').innerHTML = pointsList;
        document.querySelector('button[data-action="delete-point"]').addEventListener('click',function(event){
          var pointid = this.dataset.pointid;
          peaksInstance.points.removeById(pointid);
          var tr = this.parentNode.parentNode;
          var tbody = tr.parentNode;
          tbody.removeChild(tr);
          
        });

      });

      document.querySelector('button[data-action="log-data"]').addEventListener("click", function (event) {
        console.log('Segments', peaksInstance.segments.getSegments());
        console.log('Points', peaksInstance.points.getPoints());
      });

      
    })(peaks);
  </script>
</body>

</html>